﻿function CatchContainer(position, size, color, parmas) {
    NodeContainer.apply(this, [position, size, color, parmas]);

    this._isCollapse = parmas.expand;
    this._textRect = svg.append("rect")
        .attr("rx", parmas.r)
        .attr("ry", parmas.r)
        .attr("fill", parmas.color)
        .attr("stroke", "black")
        .attr("stroke-width", "1")
        .attr("cursor", "move")
        .attr("stroke-dasharray", parmas.dasharray)
        .attr("width", parmas.text.length * 6 + 16 + 6)
        .attr("height", 20)
    this._text = svg.append('text').attr("font-size", "9").attr("fill", "rgb(0,0,127)").text(parmas.text);
    this._textImage = svg.append('image').attr("xlink:href", parmas.leftTopImg).attr("width", 16).attr("height", 16);
    this._expand = svg.append('image').attr("xlink:href", imageMap["collapse"]).attr("width", 16).attr("height", 16);
    this._unpin = svg.append('image').attr("xlink:href", imageMap["unpin"]).attr("width", 16).attr("height", 16);
    this._menu = svg.append('image').attr("xlink:href", imageMap["menu"]).attr("width", 16).attr("height", 16);
    this._leftImage = svg.append('image').attr("xlink:href", parmas.leftImage).attr("width", 32).attr("height", 32).attr("tag", "catchAll");

    this.onUpdateLayout = function () {
        if (this._isCollapse == "true") {
            this.collapse();
        }
        this._domEl.attr("x", this.getActualPosition().x)
            .attr("y", this.getActualPosition().y)
            .attr("width", this.getSize().w)
            .attr("id",parmas.id)
            .attr("height", this.getSize().h);

        this._textRect.attr("x", this.getActualPosition().x + 3).attr("y", this.getActualPosition().y + 4);
        this._textImage.attr("x", this.getActualPosition().x + 5).attr("y", this.getActualPosition().y + 6);
        this._text.attr("x", this.getActualPosition().x + 5 + 16).attr("y", this.getActualPosition().y + 11 + 4);
        this._expand.attr("x", this.getActualPosition().x + this.getSize().w * 0.85).attr("y", this.getActualPosition().y + 2);
        this._unpin.attr("x", this.getActualPosition().x + this.getSize().w * 0.79).attr("y", this.getActualPosition().y + 2);
        this._menu.attr("x", this.getActualPosition().x + this.getSize().w * 0.9).attr("y", this.getActualPosition().y + 1);
        this._leftImage.attr("x", this.getActualPosition().x - 16).attr("y", this.getActualPosition().y + this.getSize().h * 0.5);

        for (var i = 0; i < this.children.length; i++) {
            this.children[i].updateLayout();
        }
        if (this.logFlag) {
            worker.postMessage("Create a Image:  x:" + this._position.x + ", y:" + this._position.x + ", width:" + this._size.w + ", height:" + this._size.h);
        }
        this.logFlag = false;
    }

    this.hide = function () {
        this._textRect.attr("display", "none");
        this._textImage.attr("display", "none");
        this._text.attr("display", "none");
        this._expand.attr("display", "none");
        this._unpin.attr("display", "none");
        this._menu.attr("display", "none");
        this._leftImage.attr("display", "none");

        this._domEl.attr("display", "none");
        for (var i = 0; i < this.children.length; i++) {
            this.children[i].hide();
        }
    }

    this.collapse = function () {
        for (var i = 0; i < this.children.length; i++) {
            this.children[i].hide();
        }
        this._textRect.attr("display", "none");
        this._textImage.attr("display", "none");
        this._text.attr("display", "none");
        this._unpin.attr("display", "none");
        this._menu.attr("display", "none");
        this._leftImage.attr("display", "none");
        this._expand.attr("xlink:href", imageMap["uncollapse"]);
    }

}